<template>
  <div>Hello World!</div>
  <br>
  <div ref="timeData">{{ timeData }}</div>
  <br>
  <el-button type="primary" @click="copyTime">Copy time</el-button>
</template>

<script>
import axios from 'axios';
import { successMsg, errorMsg } from '/src/utils/common.js'

export default {
  data() {
    return {
      timeData: null,
    };
  },
  mounted() {
    this.startTimer();
  },
  beforeUnmount() {
    this.stopTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(this.fetchData, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
    fetchData() {
      axios.get('http://localhost:8080/getTime')
        .then(response => {
          this.timeData = response.data;
        })
        .catch(error => {
          errorMsg(error);
        });
    },
    copyTime() {
      const textToCopy = this.$refs.timeData.innerText;
      navigator.clipboard.writeText(textToCopy)
        .then(() => {
          successMsg();
        })
        .catch(error => {
          errorMsg(error);
        });
    }
  },
};
</script>

<style scoped></style>
